<template>
	<view class="content1">
		<view class="MainBox" style="padding-top: 20px;">

			<!-- <view style="margin: 10px 0;">
				<text style="font-size: 26px;font-weight: 600;color: #fff;">我的</text>
			</view> -->


			<u-cell-group class="UserInfoCell" :border="false">
				<u-cell :border="false" @click="ToOther">
					<view slot="title" class="u-slot-title">
						<view class="UserInfoBox" style="display: flex;align-items: center;">
							<u-avatar :src="UserInfo.HeadshotImg" size="100%" uploadIcon="camera-fill" :multiple="false"
								style="width: 100px;height: 100px;border-radius: 999999px;background-color: #fff;box-shadow: 1px 1px 13px -7px #999;"
								:maxCount="1"></u-avatar>

							<view
								style="display: flex;flex-direction: column;margin-left: 16rpx;font-size: 18rpx;font-weight: 600;color: #fff;">
								<text style="font-size: 24px;">{{UserInfo.UserCode}}</text>

								<u-tag :text="UserInfo.UserName" style="width: fit-content;margin-top: 6px;" size="mini"
									type="warning"></u-tag>

								<!-- <text style="margin-top: 10px;">{{UserInfo.Duties}}</text> -->
							</view>
						</view>
					</view>

					<!-- <view slot="value">
						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view> -->
				</u-cell>
			</u-cell-group>


			<view class="MainCellBox">
				<u-cell-group class="CellBox" :border="false">
					<u-cell :border="false" size="large" :title="item.Text" :titleStyle="{color:'#999' }"
						v-for="(item,index) in CellBox" :key="index" @click="ToOther(item)">
						<view slot="icon">
							<uni-icons v-if="item.Text == '授权'" fontFamily="CustomFontPlatform" :color="item.IconColor"
								:size="24" style="margin-right:6px;">{{$utils.toUniCode(item.Icon)}}</uni-icons>

							<uni-icons v-else :type="item.Icon" size="24" :color="item.IconColor"
								style="margin-right:6px;"></uni-icons>
						</view>
						<view slot="value" class="x-f" style="justify-content: flex-end;">
							<text v-if="item.Text == '授权'" :style="{color: IsTrue ? '#51d0d0' : '#999'}"
								style="margin-right: 6px;color: #51d0d0;">{{IsTrue ? '已授权' : '未授权'}}</text>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</u-cell>

					<u-cell :border="false" size="large" title="SignalR连接状态" :titleStyle="{color:'#999' }">
						<view slot="icon">
							<uni-icons fontFamily="CustomFontPlatform" color="#51d0d0" :size="24"
								style="margin-right:6px;">{{$utils.toUniCode('&#xe613;')}}</uni-icons>
						</view>

						<view slot="value">
							<text
								:style="{color: SignalR_Status? '#51d0d0' : '#999'}">{{SignalR_Status ? '已连接':'未连接'}}</text>
						</view>
					</u-cell>

					<u-cell :border="false" size="large" title="退出登录" :titleStyle="{color:'#999' }" @click="LoginOut">
						<view slot="icon">
							<uni-icons fontFamily="CustomFontPlatform" color="#ff694f" :size="24"
								style="margin-right:6px;">{{$utils.toUniCode('&#xe614;')}}</uni-icons>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>

		<u-modal style="z-index: 9999999;" customClass="ModalPopupBox" :duration="100" contentPadStyle="40rpx 40rpx"
			:show="showLoginOut" :showConfirmButton="false" :zoom="false" width="480rpx" title="注销登录"
			content='是否要注销当前登录？'>
			<template slot="confirmButton">
				<view class="x-f" style="justify-content: space-around;">
					<u-button shape="circle"
						style="width: 44%;background-color: #f0f0f0;color: #4d4d4d;font-weight: 600;" text="取消"
						@click="CloseLoginOut" plain></u-button>
					<u-button shape="circle" style="width: 44%;background-color: #51d0d0;color: #fff;font-weight: 600;"
						text="确定" @click="SubmitLoginOut"></u-button>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// currentID: null, // 底部栏选中项值
				UserInfo: {
					HeadshotImg: '',
					UserAccount: '', // 账号
					UserName: '', // 职务
					UserCode: '', // 用户名
					Tel: '', // 联系方式
				},
				CellBox: [ // cell功能模块组
					{
						Text: '授权',
						Icon: '&#xe602;',
						IconColor: '#16d92d',
						ID: 0
					}, {
						Text: '关于',
						Icon: 'info',
						IconColor: '#e6da2b',
						ID: 1
					},
					{
						Text: '设置',
						Icon: 'gear',
						IconColor: '#b6b6b6',
						ID: 2
					},
					// {
					// 	Text: '帮助教程',
					// 	Icon: 'help',
					// 	IconColor: '#ff9d00',
					// 	ID: 3
					// },
				],
				IsTrue: false, // 是否授权

				showLoginOut: false, // 是否展示注销登录窗口
			}
		},
		onLoad(option) {
			// console.log(option.TabbarID)
			// this.currentID = +option.TabbarID;

			console.log(this.$store.state.IPModel.SignalR_Status)
			console.log(this.$store.state.SignalRClientID)
		},
		onShow() {
			var that = this;
			// 赋值授权信息
			if (uni.getStorageSync('Authorization_Info')) {
				let data = JSON.parse(uni.getStorageSync('Authorization_Info'))
				that.IsTrue = data.Authorization
			}
			setTimeout(() => {
				that.UserInfo = that.$store.state.UserInfo;
			}, 50);
		},
		created() {
			var that = this;
			// 赋值授权信息
			if (uni.getStorageSync('Authorization_Info')) {
				let data = JSON.parse(uni.getStorageSync('Authorization_Info'))
				that.IsTrue = data.Authorization
			}
			setTimeout(() => {
				that.UserInfo = that.$store.state.UserInfo;
			}, 50);
		},
		computed: {
			SignalR_Status() {
				return this.$store.state.IPModel.SignalR_Status
			}
		},
		methods: {
			ToOther(data) {
				let url = ''

				if (data.ID == 0) {
					url = '/pages/mine/OnlyIdentity'
				} else if (data.ID == 1) {
					url = '/pages/mine/MineAbout'
				} else if (data.ID == 2) {
					url = '/pages/mine/SettingPage'
				}

				if (url) {
					uni.navigateTo({
						url: url,
						fail(error) {
							console.log(error)
						}
					})
				}
			},
			LoginOut() {
				this.showLoginOut = true;
			},
			SubmitLoginOut() {
				uni.removeStorageSync('Automatic_Login')
				uni.reLaunch({
					url: '/pages/login/login',
				});
			},
			CloseLoginOut() {
				this.showLoginOut = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.u-popup {
		flex: initial !important;

	}

	.ModalPopupBox {

		.u-popup__content {
			border-radius: 30rpx !important;
		}
	}

	.content1 {
		/* 给顶部盒子安全高度 */
		padding: var(--status-bar-height) 0 0;
		// height: 100vh;
		background-image: linear-gradient(to bottom, #51d0d0, rgba(81, 208, 208, .6), #fff, #fff);
		display: flex;
		flex-direction: column;

		.MainBox {
			flex: 1;
			padding: 0 15px;
			display: flex;
			flex-direction: column;
		}


		// 用户信息
		.UserInfoCell {
			padding: 40rpx 0;

			// 用户信息右侧箭头样式
			.uicon-arrow-right {
				color: #fff !important;
				font-size: 24px !important;
			}
		}

		.u-cell-group {
			flex: none !important;

			.u-line {
				border: none;
			}
		}

		// cell功能模块组
		.MainCellBox {
			border-radius: 20px 20px 0 0;
			overflow: hidden;
			background-color: #fff;
			flex: 1;
			// height: 100%;

			.u-cell {
				background-color: #fff !important;
				position: relative;
			}

			// 给cell框下方加一根浅的线
			.u-cell::after {
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				right: 16px;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}

			// 去除最后一个cell的下划线
			& .u-cell:last-child::after {
				border-bottom: none !important;
			}
		}

	}
</style>